<template>
  <div class="ma-content-block">
    <a-space class="flex">
      <a-button type="primary" @click="visible = true">
        <template #icon><icon-select-all /></template>{{ props.text }}
      </a-button>
      <a-tag size="large" color="blue" v-if="props.isEcho"
        >已选择 {{ isArray(selecteds) ? selecteds.length : 0 }} 位</a-tag
      >
      <a-input-tag
        v-model="userList"
        v-if="props.isEcho"
        :style="{ width: '320px' }"
        :placeholder="'请点击前面按钮' + props.text"
        :max-tag-count="3"
        disabled
      />
    </a-space>

    <a-modal v-model:visible="visible" width="1000px" draggable :on-before-ok="close" unmountOnClose>
      <template #title>{{ props.text }}</template>

      <ma-crud
        ref="crudRef"
        :options="crud"
        :columns="columns"
        v-model:selected-keys="selecteds"
        @selection-change="selectHandler"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue"
import commonApi from "@/api/common"
import { Message } from "@arco-design/web-vue"
import { isArray, isEmpty } from "lodash"

const props = defineProps({
  modelValue: { type: Array },
  isEcho: { type: Boolean, default: false },
  multiple: { type: Boolean, default: true },
  onlyId: { type: Boolean, default: true },
  text: { type: String, default: "选择用户" }
})

const emit = defineEmits(["update:modelValue", "success"])

const visible = ref(false)
const selecteds = ref([])
const userList = ref([])

onMounted(() => {
  if (props.isEcho && props.onlyId) selecteds.value = props.modelValue
})

watch(
  () => props.modelValue,
  (val) => {
    if (props.isEcho && props.onlyId) selecteds.value = val
  }
)

const selectHandler = (rows) => {
  selecteds.value = rows
}

const close = async (done) => {
  if (isArray(selecteds.value) && selecteds.value.length > 0) {
    const response = await commonApi.getUserInfoByIds({ ids: selecteds.value })
    if (!isEmpty(response) && isArray(response.data)) {
      userList.value = response.data.map((item) => {
        return `${item.username}(${item.id})`
      })
      if (props.onlyId) {
        emit("update:modelValue", selecteds.value)
      } else {
        emit("update:modelValue", response.data)
      }
      emit("success", true)
      Message.success("选择成功")
    }
  } else {
    emit("update:modelValue", [])
    userList.value = []
  }
  done(true)
}

const crud = ref({
  showIndex: false,
  api: commonApi.getUserList,
  rowSelection: props.multiple ? { type: "checkbox", showCheckedAll: true } : { type: "radio" }
})

const columns = ref([
  { title: "账户", dataIndex: "username", search: true },
  { title: "昵称", dataIndex: "nickname", search: true },
  { title: "手机", dataIndex: "phone", search: true },
  { title: "邮箱", dataIndex: "email", search: true },
  {
    title: "部门",
    dataIndex: "dept_id",
    search: true,
    formType: "tree-select",
    hide: true,
    dict: { url: "/core/dept/index?tree=true" }
  },
  {
    title: "角色",
    dataIndex: "role_id",
    search: true,
    formType: "select",
    hide: true,
    dict: {
      url: "/core/role/index?saiType=all",
      props: { label: "name", value: "id" }
    }
  },
  {
    title: "岗位",
    dataIndex: "post_id",
    search: true,
    formType: "select",
    hide: true,
    dict: {
      url: "/core/post/index?saiType=all",
      props: { label: "name", value: "id" }
    }
  }
])
</script>

<style scoped>
:deep(.arco-tabs-nav-type-capsule .arco-tabs-nav-tab) {
  justify-content: flex-start;
}
</style>
